<template>
  <div v-analytics.pageview>
     <img src="~assets/login/loginBg.png" :class="$style.banner">
     <div :class="$style.content">
       <v-button
        :class="$style.emailButton"
        type="danger"
        @click="emailTap"
        v-analytics.click="{
          action: 'Continue With Cellphone Click',
          category: 'Login and Sign Page',
        }"
      >
        Continue With Email
      </v-button>
      <v-button
        :class="$style.button"
        type="danger"
        @click="phoneTap"
        ghost
        v-analytics.click="{
          action: 'Continue With Email Click',
          category: 'Login and Sign Page',
        }"
      >
        Continue With Cellphone
      </v-button>
      <v-button
        :class="$style.button"
        type="danger"
        @click="facebookTap"
        ghost
        v-analytics.click="{
          action: 'Continue With Facebook Click ',
          category: 'Login and Sign Page',
        }"
      >
        Continue With Facebook
      </v-button>
      <p v-text="tips"></p>
     </div>
     <loading :show="showLoading" />
  </div>
</template>

<script>
import { button, toast, loading } from 'components'

export default {
  name: 'indexPage',
  components: {
    vButton: button,
    toast,
    loading,
  },
  data() {
    return {
      tips: 'Your account info is safe with us.  We won’t share or use it elsewhere',
      showLoading: false,
    }
  },
  mounted() {
    // this.getFacebookState()
  },
  methods: {
    emailTap() {
      sessionStorage.isThrid = 0
      this.$router.push({ path: '/login/byEmail' })
    },
    phoneTap() {
      sessionStorage.isThrid = 0
      this.$router.push({ path: '/login/byPhone' })
    },
    facebookTap() {
      /* eslint-disable */
      FB.login((response) => {
        this.showLoading = true
        const authObject = response.authResponse
        this.$store.dispatch('thridLogin', { openId: authObject.userID, accessToken: authObject.accessToken, type: 1 })
          .then((res) => {
            this.showLoading = false
            if (res.code === 1000) {
              toast(res.info)
              this.redirect()
            } else if (res.code === 1009) {
              // 走设置密码流程
              sessionStorage.isThrid = 1
              sessionStorage.openId = authObject.userID
              sessionStorage.accessToken = authObject.accessToken
              sessionStorage.authType = 1 //facebook
              this.$router.push({ path: '/login/byPhone' })
            } else {
              toast(res.info)
            }
          })
      });
    },
    redirect() {
      if (sessionStorage.redirect) {
        const redirectUrl = sessionStorage.redirect
        this.$router.replace({ path: redirectUrl })
      }
    }
  },
}
</script>

<style module lang="scss">
.banner {
  display: block;
  width: 100%;
  height: 216px;
}

.emailButton {
  border-radius: 4px;
  margin-bottom: 12px;
}

.content {
  padding-top: 48px;
  padding-left: 30px;
  padding-right: 30px;
  p {
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    padding-top: 18px;
    padding-left: 50px;
    padding-right: 50px;
  }
}

.button {
  margin-bottom: 12px;
}
</style>
